{extend name='bus@public/index'}
{block name="css"}
<style>
    html,body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .tsel{
        color: #00a4ac;
    }
    thead input[type=checkbox]{
        display: none;
    }
</style>
{/block}
{block name="main"}
<form style="padding-top: 10px;">
    <div class="bd-example text-right" style="padding-right: 10px;">
        <input type="hidden" name="role_id" value="{$Think.get.id}">
        <input class="btn btn-secondary mr-2" type="button" value=" 保存 " id="submit" >
    </div>
    <div class="row" style="padding: 10px;">
        <div class="col-6">
            <table class="table" id="dg1"></table>
        </div>
        <div class="col-6">
            <table class="table" id="dg2"></table>
        </div>
        <div class="col-2" style="display: none">
            <table class="table" id="dg3"></table>
        </div>
        <div class="col-3" style="display: none">
            <table class="table" id="dg4"></table>
        </div>
    </div>
    <input type="hidden" id="menu_button_id" value="">

    <div class="hr-line-dashed"></div>
</form>
{/block}
{block name="script"}
<script>

    var PageConfig = {};

    let iframeHeight = parent.$("#layui-layer-iframe"+parent.layer.getFrameIndex(window.name)).height()-$('.bd-example').height()-50;
    //表格1
    $('#dg1').bootstrapTable({
        method: 'get',
        height:iframeHeight,
        url: '/admin/develop/menu_lst',
        pagination: false,
        clickToSelect: false,
        singleSelect: false,
        treeShowField: 'title',
        parentIdField: 'pid',
        columns: [
            {field: 'cb', title: 'cb',checkbox:true},
            {field: 'title', title: '名称',formatter:function (value, row, index) {
                return '<i class="'+row.ico+'" style="width: 18px;display:inline-block;"></i>&nbsp;'+value;
            }},

            {field: 'id', title: 'id',width:50},
        ],
        onLoadSuccess: function(data) {
            $('#dg1').treegrid({
                treeColumn: 1,
            });
            checkMenu();
        },
        onClickRow:function(row,$el) {

            //颜色高亮
            $el.parent().find('tr').removeClass('tsel');
            $el.addClass("tsel");

            //点击菜单的时候,查看对应配置的按钮
            $("#menu_button_id").val(row['id'])
            //刷新dg2的数据
            $("#dg2").bootstrapTable('refresh');
        },
        onCheck:function (row,el) {
            let add = {"menu_id":row['id'],"button_id":0};
            var data = $('#dg3').bootstrapTable('getData');
            if(in_array_object(add,data) == -1)  data.push(add); //如果不存在当前中,则新增
            $('#dg3').bootstrapTable('load',data);
        },
        onUncheck:function (row,el) {
            let add = {"menu_id":row['id'],"button_id":0};
            var data = $('#dg3').bootstrapTable('getData');
            let index = in_array_object(add,data);
            if(index !== -1) data.splice(index,1) //如果存在当前数据,则删除
            $('#dg3').bootstrapTable('load',data);

        },
    });

    //表格2
    $('#dg2').bootstrapTable({
        method: 'get',
        height:iframeHeight,
        url: '/admin/develop/menu_button_lst',
        sidePagination: 'server',
        pagination: false,
        pageSize: 20,
        clickToSelect: true,
        singleSelect: false,
        columns: [
            {field: 'cb', title: 'cb',checkbox:true},
            {field: 'name', title: '名称',formatter:function (value, row, index) {
                return '<i class="'+row.ico+'" style="width: 18px;display:inline-block;"></i>&nbsp;'+value;
            }},
            {field: 'id', title: 'id',width:50},
        ],
        onCheck:function (row,el) {

            var tr = $('#dg1').find("tr.tsel");
            if(tr.length == 0){
                return;
            }

            let menu_button_id = $("#menu_button_id").val(); //获取table1最后一次点击的id
            let add = {"menu_id":Number(menu_button_id),"button_id":row['id']};//菜单id,当前按钮id
            var data = $('#dg3').bootstrapTable('getData');

            if(in_array_object(add,data) === -1)data.push(add);
            $('#dg3').bootstrapTable('load',data);
        },
        onUncheck:function (row,el) {

            var tr = $('#dg1').find("tr.tsel");
            if(tr.length == 0){
                return;
            }

            let menu_button_id = $("#menu_button_id").val();
            let add = {"menu_id":Number(menu_button_id),"button_id":row['id']};//菜单id,当前按钮id
            var data = $('#dg3').bootstrapTable('getData');

            let index =  in_array_object(add,data)
            if(index !== -1) data.splice(index,1);
            $('#dg3').bootstrapTable('load',data);

        },
        queryParams:function(data)
        {
            data.menu_button_id = $("#menu_button_id").val();
            data.role_id = $("[name=role_id]").val();
            return data;
        },
        onLoadSuccess(data)
        {
            //获取table3的数据
            let table3 = $("#dg3").bootstrapTable('getData');
            let menu_button_id = $("#menu_button_id").val();
            for(let k in data)
            {
                let add = {"menu_id":Number(menu_button_id),"button_id":data[k]['id']};

                if(in_array_object(add,table3) != -1) //判断当前按钮是否已有权限,有权限则选中
                {
                    $('#dg2').bootstrapTable('check',k);
                }
            }
        }
    });

    //表格3
    $('#dg3').bootstrapTable({
        method: 'get',
        height:iframeHeight,
        url: '/admin/role/menu_button_lst3',
        pagination: false,
        columns: [
            {field: 'menu_id', title: 'menu_id'},
            {field: 'button_id', title: 'button_id'},
        ],
        onLoadSuccess:function () {
            checkMenu();
        },
        queryParams: function (params) {
            params.role_id = $("[name=role_id]").val();
            return params;
        },
    });

    //表格4
    $('#dg4').bootstrapTable({
        method: 'get',
        height:450,
        url: '/admin/develop/menu_button_lst3',
        pagination: false,
        columns: [
            {field: 'menu_id', title: 'menu_id'},
            {field: 'button_id', title: 'button_id'},
        ],
    });

    // 保存
    $("#submit").on("click", function () {
        var role_id = $("[name=role_id]").val();
        var data = $('#dg3').bootstrapTable('getData');
        frame.ajax({
            url:"/admin/role/menu_button_save",
            type:"post",
            data:{role_id:role_id, data:data},
        }).then(function (result) {
            oob.show(result,function () {
                if (result.code == 0) {
                    parent.layer.close(parent.layer.getFrameIndex(window.name));
                    parent.bind();
                }
            });
        });
    });

    var ic = 0;
    function checkMenu() {
        ic++;
        if(ic<2) return;

        var data1 = $('#dg1').bootstrapTable('getData');
        var data3 = $('#dg3').bootstrapTable('getData');

        $('#dg1').bootstrapTable('uncheckAll');

        for (var i=0;i<data1.length;i++){
            var menu_id = data1[i]['id'];
            var button_id = 0;
            for (var j=0;j<data3.length;j++){
                if(data3[j]['menu_id'] == menu_id && data3[j]['button_id'] == button_id){
                    $('#dg1').bootstrapTable('check',i);
                    break;
                }
            }
        }
    }

</script>
{/block}